// Animation Utilities

// Grow In Animation

@keyframes growIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animated--grow-in {
  animation-name: growIn;
  animation-duration: 200ms;
  animation-timing-function: transform cubic-bezier(.18,1.25,.4,1), opacity cubic-bezier(0,1,.4,1);
}

// Fade In Animation

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated--fade-in {
  animation-name: fadeIn;
  animation-duration: 200ms;
  animation-timing-function: opacity cubic-bezier(0,1,.4,1);
}


/*左右摇摆动画
<div class="animated--swing-run">
    <img src="9.jpg" />
</div>
*/
@keyframes swingRun {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animated--swing-run {
    position: relative;
    overflow: hidden; 
    z-index: 5;
    cursor: pointer;
}
.animated--swing-run:hover {
    animation: swingRun 1s ease;
    animation-iteration-count: 1;
}


/*
字体下划线
*/
//.text-decoration-color{
.animated--text-decoration{
  background-image: linear-gradient(rgba(0, 0, 0, 0) calc(99% - 1px), #FE4F70 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s;
}
.animated--text-decoration:hover {
  text-decoration: none;
  background-size: 100% 100%;
}